<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
<title>赵唐-商品购物车</title>
<link href="${ctxStatic }/site/themes/default/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="${ctxStatic }/site/themes/default/css/css.css" rel="stylesheet" type="text/css">
<script src="${ctxStatic }/site/themes/default/js/respond.min.js"></script>
<script src="${ctxStatic}/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="${ctxStatic}/jquery/jquery-migrate-1.1.1.min.js" type="text/javascript"></script>

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>
<script src="${ctxStatic}/site/themes/default/js/hideOptionMenu.js" type="text/javascript"></script>

<script type="text/javascript">

function chosePay(str){
	if(str==="chooseWX"){
		$(".chooseWX").removeClass("icon_enter_off");
		$(".chooseWX").addClass("icon_enter");
		/* 
		$(".chooseAlipay").removeClass("icon_enter");
		$(".chooseAlipay").addClass("icon_enter_off");
		 */
		$(".chooseOfflinePay").removeClass("icon_enter");
		$(".chooseOfflinePay").addClass("icon_enter_off");
		$("#payType").val("4");
		
		$("#isCreditScore").removeAttr("disabled");
	}
	/* 
	if(str==="chooseAlipay"){
		$(".chooseAlipay").removeClass("icon_enter_off");
		$(".chooseAlipay").addClass("icon_enter");
		$(".chooseWX").removeClass("icon_enter");
		$(".chooseWX").addClass("icon_enter_off");
		$(".chooseOfflinePay").removeClass("icon_enter");
		$(".chooseOfflinePay").addClass("icon_enter_off");
		$("#payType").val("1");
		
		$("#isCreditScore").removeAttr("disabled");
	}
	 */
	if(str==="chooseOfflinePay"){
		$(".chooseOfflinePay").removeClass("icon_enter_off");
		$(".chooseOfflinePay").addClass("icon_enter");
		$(".chooseWX").removeClass("icon_enter");
		$(".chooseWX").addClass("icon_enter_off");
		/* 
		$(".chooseAlipay").removeClass("icon_enter");
		$(".chooseAlipay").addClass("icon_enter_off");
		 */
		$("#payType").val("5");
		
		
		$("#isCreditScore").attr('checked',false);
		$("#isCreditScore").attr("disabled","disabled");
		$("#shiFuKuan").html(${totailPrice/100});
		$("#score").val(0);
		$("#price").val(${totailPrice});
	}
}

	function formSubmit(){
		if($("#payType").val() === ""){
			alert("您没选择支付方式！");
			return false;
		}
		
		if($("#memberName").val() === ""){
			alert("请填写收件人姓名！");
			return false;
		}
		
		if($("#memberMobile").val() === ""){
			alert("请填写收件人电话！");
			return false;
		}
		
		$("#j-order-form-refresh").submit();
	}
	
	$(document).ready(function() {
		fnIsScore();
	});
	
	function fnIsScore(){
		if($("input[type='checkbox'][id='isCreditScore']:checked").attr("checked")){
			var shiFuKuan = ${(totailPrice-scorePrice)/100};
			$("#shiFuKuan").html(shiFuKuan);
			$("#score").val(${scoreNumber});
			$("#price").val(${(totailPrice-scorePrice)});
		}else{
			var shiFuKuan = ${totailPrice/100};
			$("#shiFuKuan").html(shiFuKuan);
			$("#score").val(0);
			$("#price").val(${totailPrice});
		}
	}
</script>
<style>
.order_dl2 {
	margin: 2.5% 0;
	float: left;
	width: 96%;
	background-color: #FFF;
	padding: 2%;
	border-top: 1px #eee solid;
	border-bottom: 1px #eee solid;
}
</style>
</head>
<body>
<div class="gridContainer clearfix orderbg" id="order">
<form class="p-submission" id="j-order-form-refresh" method="post" action="${ctxFront }/site/shopping/toPay">
	<input type="hidden" name="user.id" value="${product.user.id }">
	<input type="hidden" name="uid" value="${uid }">
	<input type="hidden" name="wechatId" value="${wechatId }">
	<input type="hidden" name="address.id" value="${address.id }">
	<input type="hidden" name="name" value="${product.name }">
	<input type="hidden" name="product.id" value="${product.id }">
	<input type="hidden" name="productNumber" value="${productNumber}">
	<c:if test="${wxPayFlag eq 1}">
		<input type="hidden" name="payType" value=""  id="payType">
	</c:if>
	<c:if test="${wxPayFlag eq 0}">
		<input type="hidden" name="payType" value="4"  id="payType">
	</c:if>
	<%-- 
	<c:if test="${wxPayFlag eq 1&&zhibubaoFlag eq 1 }">
		<input type="hidden" name="payType" value=""  id="payType">
	</c:if>
	<c:if test="${wxPayFlag eq 0&&zhibubaoFlag eq 0 }">
		<input type="hidden" name="payType" value="4"  id="payType">
	</c:if>
	<c:if test="${wxPayFlag eq 0 &&zhibubaoFlag eq 1}">
		<input type="hidden" name="payType" value="4"  id="payType">
	</c:if>
	<c:if test="${wxPayFlag eq 1&&zhibubaoFlag eq 0 }">
		<input type="hidden" name="payType" value="1"  id="payType">
	</c:if>
	 --%>
  <div id="LayoutDiv1" style="margin-bottom:60px;"  >
    <section>
      <div style="min-height:50px; background-color:#FFF; border-top:3px #bdea8f dashed; border-bottom:3px #bdea8f dashed; padding:3%" 
      	onclick="window.location.href='${ctxFront }/site/shopping/chooseAddressList?uid=${uid}&wechatId=${wechatId}&productId=${product.id}&productNumber=${productNumber}'" >
	      <c:if test="${empty address }">
	      	您还没有设置您的地址哦
	      </c:if>
	      <c:if test="${!(empty address) }">
		      <p><span class="left icon_name font18">&nbsp;${address.name}</span><span class="icon_tel font18 right">${address.mobile}</span></p>
		      <p class="clear font999" style="padding-top:10px">${address.province }&nbsp;${address.city }&nbsp;${address.county }&nbsp;${fn:substring(address.detail,0,9) }</p>
	      </c:if>
      </div>
      <c:if test="${!(empty address) }">
      	<c:if test="${address.addType eq '1'}">
      		<div style="margin-top:10px; background-color:#FFF; padding:3%" >
				<p class="font_left">收件人姓名：<input type="text" id="memberName" name="memberName" value="${member.name}" style="width:50%; border:1px solid #CCCCCC; border-radius:5px; background-color:#f3f3f3; height:25px; padding-left:3%; color:#999; margin-top:10px;"></p>
       			<p class="clear font_left">收件人电话：<input type="text" id="memberMobile" name="memberMobile" value="${member.mobile }" style="width:50%; border:1px solid #CCCCCC; border-radius:5px; background-color:#f3f3f3; height:25px; padding-left:3%; color:#999; margin-top:10px;"></p>
      		</div>
	      </c:if>
	  </c:if>    	
      <div style="margin-top:10px; background-color:#FFF; padding:3%"  onclick="javascript:window.location.href='${ctxFront }/site/shopping/showProductList?uid=${uid}&wechatId=${wechatId}&products=${product.id }'" >
       	<span><img src="${ctxUser}/product/${product.indexPic}" height="50"></span> 
        <span class="right icon_href" style="padding-top:20px;">共 ${productNumber} 件</span> 
       </div>
      
      <div style="margin-top:10px; background-color:#FFF; padding:3%" >
      	<span><input type="checkbox" checked="true" id="isCreditScore" onclick="fnIsScore()">使用信用积分：
      		<fmt:formatNumber value="${scoreNumber/1000}" pattern="##.###"  minFractionDigits="3"/>
      		<input type="hidden" id="score" name="score" value="${scoreNumber}">
      		<input type="hidden" id="price" name="price" value="${(totailPrice-scorePrice)}">
      	</span>
      </div>
      
      <div style="margin-top:10px; background-color:#FFF; padding:3%; height:240px; ">
      <dl>
	      <dt class="clear">
	        <p><span class="font18">支付方式</span></p>	
	      </dt>
        <c:if test="${wxPayFlag eq 0 }">
		    <div onclick="chosePay('chooseWX')"  style="height:60px; width:100%; " >
				<hr class="clear" style="margin-bottom:2% 0">
				<dt class="clear" style="float:left; width:16%; text-align:center ">
					<img src="${ctxStatic }/site/themes/default/images/wx.png" width="27" height="27">
				</dt>
				<dt style="float:left; width:60%; padding-left:3%; padding-bottom:1%">
					<p style=" font-size:15px;">微支付</p>
					<p class="font999" style="font-size:6px;">推荐已开通微支付的用户使用</p>
				</dt>
				<dt style="float:left; width:14%; padding-left:3%;">
				    <span class="icon_enter chooseWX" style="float:right"></span> 
				</dt>
		    </div>
        </c:if>
       <%-- 
       <c:if test="${zhibubaoFlag eq 0 }">
	       <div onclick="chosePay('chooseAlipay')"  style="height:60px; width:100%; " >
				<hr class="clear" style="margin:2% 0">
			    <dt class="clear" style="float:left; width:16%; text-align:center ">
			    	<img src="${ctxStatic }/site/themes/default/images/zf.png" width="65" height="25">
			    </dt>
			    <dt style="float:left; width:60%; padding-left:3%; padding-bottom:1%">
			        <p style="font-size:15px;">支付宝</p>
			        <p class="font999" style="font-size:6px;">推荐已开通支付宝的用户使用</p>
			    </dt>
			    <dt style="float:left; width:14%; padding-left:3%;">
			      <c:if test="${ !(wxPayFlag eq 1&&zhibubaoFlag eq 0) }"><span class="icon_enter_off chooseAlipay" style="float:right"></span> </c:if>
			      <c:if test="${ wxPayFlag eq 1&&zhibubaoFlag eq 0 }"><span class="icon_enter chooseAlipay" style="float:right"></span> </c:if>
			    </dt>
	      </div>
       </c:if>
        --%>
       <div onclick="chosePay('chooseOfflinePay')"  style="height:60px; width:100%; " >
			<hr class="clear" style="margin:2% 0">
			<dt class="clear" style="float:left; width:16%; text-align:center ">
		      	<img src="${ctxStatic }/site/themes/default/images/hdfk.png" width="65" height="25">
		    </dt>
			<dt style="float:left; width:60%; padding-left:3%; padding-bottom:1%">
			    <p style="font-size:15px;margin-left:10px;">线下支付</p>
		      	<p class="font999" style="font-size:10px; padding-top:3px;margin-left:10px;">货到付款</p>
			</dt>
			<dt style="float:left; width:14%; padding-left:3%;">
			      <c:if test="${ !(wxPayFlag eq 1&&zhibubaoFlag eq 0) }"><span class="icon_enter_off chooseOfflinePay" style="float:right"></span> </c:if>
			      <c:if test="${ wxPayFlag eq 1&&zhibubaoFlag eq 0 }"><span class="icon_enter chooseOfflinePay" style="float:right"></span> </c:if>
			</dt>
	   </div>
	   <%-- 
       <c:if test="${wxPayFlag ne 0 && zhibubaoFlag ne 0 }">
       		<span class="font18">暂无支付方式</span>
       </c:if> --%>
      </dl>
      </div>
      
      <div  style="margin-top:10px; background-color:#FFF; padding:3%;"> <span class="font18">订单备注:</span>
        <input type="text"  name="remarks" placeholder="限备注45个字"  style="width:95%; border:1px solid #CCCCCC; border-radius:5px; background-color:#f3f3f3; height:35px; padding-left:3%; color:#999; margin-top:10px;">
      </div>
      <div style="margin-top:10px; background-color:#FFF; padding:3%">
        <p><span>商品金额</span> <span class="right fontred">￥<fmt:formatNumber value="${totailPrice/100}" pattern="##.##"  minFractionDigits="2"/></span></p>
        <br>
        <p><span>运费</span> <span class="right fontred">￥0.00</span></p>
      </div>
    </section>
    <div class="jszch">技术支持：<a href="http://www.hdzhx.com/boxin/index.html" >智讯互联</a></div>
  </div>
  </form>
  <footer class="tbl-type detail-tbn2"  style="position: fixed; left: 0px; bottom: 0px; z-index: 10; display: table;">
    <div class="tbl-cell">
      <p class="font18">实付款</p>
      <p class="font20red">￥
      	<span id="shiFuKuan"><fmt:formatNumber value="${(totailPrice-scorePrice)/100}" pattern="##.##"  minFractionDigits="2"/></span>
      </p>
    </div>
    <div class="tbl-cell"> 
     <c:if test="${empty address }">
     	<input onclick="javascript:alert('您还没有填写您的地址！!');" class="anniu btn-buy" type="submit" value="提交订单"  style="padding: 5% 17% 5% 17%; margin:5%;color: #fff;font-size: 18px;" />
     </c:if>
      <c:if test="${!(empty address) }">
      	<input onclick="javascript:formSubmit()" class="anniu btn-buy" type="submit" value="提交订单"  style="padding: 5% 17% 5% 17%; margin:5%;color: #fff;font-size: 18px;" />
      </c:if>
    </div>
  </footer>
  
</div>
</body>
</html>